<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Met Office :: Global Temperature Visualisation</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
    <script type="text/javascript" src="js/lib/three.min.js"></script>
</head>
<body>

<div id="incompatible" style="display: none;">
    <div class="wrapper">
        <div class="combinedlogo">
            <img src="img/met-office-logo.svg" class="moLogo" alt="Met Office" />
            <h2 class="infoLabLogo">Informatics Lab</h2>
            <h3 class="hadcrut4logo">Global Temperature</h3>
        </div>
        <h3>Incompatible browser</h3>
        <p>
            Click to see a <a href="https://www.youtube.com/watch?v=40syp8Ghcr0">video of the visualisation</a>. Alternatively you can <a id='goWithNotCompatible' href='#'>proceed anyway</a>.
        </p>
        <div class="infotext">
            <p>This prototype visualisation requires a number of new and experimental browser features
                which only work with certain modern browsers in the desktop environment.</p>
            <p>Please use one of the following browsers:</p>
            <ul>
                <li>Chrome (Desktop) >= 53</li>
                <li>Firefox (Desktop) >= 49</li>
                <li>Safari (Desktop) >= 9</li>
            </ul>
        </div>
    </div>
</div>

<div id="loading">
    <div class="wrapper">
        <div class="combinedlogo">
            <img src="img/met-office-logo.svg" class="moLogo" alt="Met Office" />
            <h2 class="infoLabLogo">Informatics Lab</h2>
            <h3 class="hadcrut4logo">Global Temperature</h3>
        </div>
        <div id="hadcrut4text">
            <p>This prototype visualisation uses the <a href="http://www.metoffice.gov.uk/hadobs/hadcrut4/">HadCRUT4</a>
                dataset, a collection of global surface temperature since 1850, which uses data from the Met Office
                Hadley Centre and the Climatic Research Unit at UEA.</p>
            <p>In this visualisation you can explore this surface temperature data, and some of the global events which
                have affected it.</p>
            <p>Temperatures are expressed as the difference from average temperature between 1961-1990. The map shows 12-month rolling averages.</p>
        </div>
    </div>
</div>

<div id="content"></div>

<div id="info">
    <div class="wrapper">
        <h3><span>i</span> Global Temperature Visualisation Information</h3>
        <p>This prototype interactive visualisation uses the <a target="_blank" href="http://www.metoffice.gov.uk/hadobs/hadcrut4/">HadCRUT4</a>
            dataset, a collection of global surface temperature since 1850, which uses data from the Met Office Hadley
            Centre and the Climatic Research Unit at UEA.</p>
        <p>In this visualisation you can explore this surface temperature data, and some of the global events which have
            affected it.</p>
        <p>Temperatures are expressed as the difference from average temperature between 1961-1990. The map shows 12-month rolling averages.</p>
        <p>More advanced controls are available by pressing 'h' on the keyboard.</p>
    </div>
</div>

<script type="text/javascript" src="js/app.min.js"></script>

<!-- GOOGLE ANALYTICS -->
<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
        a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-60337429-4', 'auto');
    ga('send', 'pageview');
</script>

</body>
</html>
